<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-image: url("images/login.jpg"); /* 指定图片路径 */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

    </style>
    <link rel="stylesheet" href="css/self.css">
</head>
<body>
<div class="container">
    <h1>登&nbsp&nbsp录</h1>

    <input type="email" placeholder="请输入邮箱地址"id="exampleInputEmail1" aria-describedby="emailHelp" >
    <input type="password" placeholder="请输入密码" id="exampleInputPassword1" >
    <button type="button" id="loginBtn">立即登录</button>
</div>
<script>

    let loginBtn=  document.querySelector("#loginBtn");
    let emailInput=document.querySelector("#exampleInputEmail1");
    let pwdInput= document.querySelector("#exampleInputPassword1");

    loginBtn.addEventListener('click',()=>{
        //通过fecth发送异步请求
        let data={email:emailInput.value,pwd:pwdInput.value};
        fetch("login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
        }).then(response=>response.json()).then((data)=>{
            // if(data.flag){
            //     //跳转到index.html
            //     location.href="index.html"
            // }
            if(data.flag){
                //将数据存储到sessionStorage
                sessionStorage.setItem("info",JSON.stringify(data.data));
                location.href="index.html"
            }
        });
    })
</script>
</body>
</html>
